<template>
    <div class="background">
      <div style="margin: 16px 0 0 16px">
        <div class="butbox">
          <span class="a-button">账号:<a-input ipt v-model="text" class="search"></a-input></span>
          <span class="a-button">性别:<a-select v-model="sex" placeholder="请选择" class="search">
              <a-select-option value="">
                请选择
              </a-select-option>
              <a-select-option value="1">
                男性
              </a-select-option>
              <a-select-option value="2">
                女性
              </a-select-option>
            </a-select>
          </span>
          <span class="a-button" v-if="expand">真实姓名:<a-input ipt v-model="realname" class="search"></a-input></span>
          <span class="a-button" v-if="expand">手机号码:<a-input ipt v-model="phone" class="search"></a-input></span>
          <span class="a-button" v-if="expand">用户状态:<a-select v-model="status" placeholder="请选择" class="search">
              <a-select-option value="">
                请选择
              </a-select-option>
              <a-select-option value="1">
                正常
              </a-select-option>
              <a-select-option value="2">
                冻结
              </a-select-option>
            </a-select>
          </span>
          <a-button type="primary" class="a-button" @click="search">
            <a-icon type="search" />
            搜索
          </a-button>
          <a-button class="a-button" @click="reload1">
            <a-icon type="reload" />
            重置
          </a-button>
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            展开 <a-icon :type="expand ? 'up' : 'down'" />
          </a>
        </div>
        <div>
          <a-button type="primary" @click="showDrawer" class="a-button">
            <a-icon type="plus" />
            新增
          </a-button>
          <a-drawer title="新增" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
            <a-form class="newform">
              <a-form-model-item>
                用户账户:<a-input v-model="newform.name" class="input" />
              </a-form-model-item>
              <a-form-model-item>
                登录密码:<a-input v-model="newform.name" class="input" />
              </a-form-model-item>
              <a-form-model-item>
                确认密码:<a-input v-model="newform.name" class="input" />
              </a-form-model-item>
              <a-form-model-item>
                用户姓名:<a-input v-model="newform.name" class="input" />
              </a-form-model-item>
              <a-form-model-item>
                工号:<a-input v-model="newform.name" class="input" />
              </a-form-model-item>
              <a-form-model-item>
                工号:
              </a-form-model-item>
            </a-form>
            <div :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1,
            }">
              <a-button :style="{ marginRight: '8px' }" @click="onClose">
                Cancel
              </a-button>
              <a-button type="primary" @click="onClose">
                Submit
              </a-button>
            </div>
          </a-drawer>
  
          <a-button type="primary" class="a-button">
            <a-icon type="upload" />
            导出
          </a-button>
          <a-button type="primary" class="a-button">
            <a-icon type="export" />
            导入
          </a-button>
          <a-button type="primary" class="a-button">
            <a-icon type="hdd" />
            回收站
          </a-button>
        </div>
        <div>
        </div>
        <span style="margin-left: 8px">
          <template>
            <a-table :data-source="data1" bordered class="a-button" :pagination="ipagination1" @change="handleTableChange2"
           >
              <a-table-column key="" title="#" data-index="1">
  
              </a-table-column>
             
              <a-table-column key="name" title="名称" data-index="name" />
              <a-table-column key="symbol" title="符号" data-index="symbol" />
              <a-table-column key="isEnabled" title="换算系数" data-index="isEnabled" />
              <a-table-column key="isEnabled_dictText" title="是否启用" data-index="isEnabled_dictText" />
  
              <a-table-column key="action" title="操作" style="width:150 " data-index="action" fixed="right">
                <template slot-scope="text, record">
                  <span>
                    <a>编辑 {{ record.firstName }}</a>
                    <a-divider type="vertical" />
                    <template>
                      <a-popconfirm key="id" title="确定要删除这个用户?" ok-text="确认" cancel-text="取消" @confirm="del(record.id)"
                        @cancel="cancel">
                        <a href="#">删除</a>
                      </a-popconfirm>
                    </template>
                  </span>
                </template>
              </a-table-column>
            </a-table>
          </template>
        </span>
      </div>
  </div>
  </template>
  <script>
  
  import { getListe } from "@/api/sqf";
  import { Input } from "antd";
  const ipt = () => <Input placeholder="Basic usage" />;
  
  export default {
    name: "JiangliangView",
    data() {
  
      return {
        ipt,
        expand: false,
        show: false,
        realname: "",
        phone: "",
        status: undefined,
        sex: undefined,
        text: "",
        data1: [],
        selectedRowKeys: [], // Check here to configure the default column
        loading: false,
        newform: [],
        visible: false,
  
        ipagination1: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + '共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
      };
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0;
      },
    },
    created() {
      this.getPostList()
    },
    methods: {
      toggle() {
        this.expand = !this.expand
      },
      //
      async getPostList() {
        const p = {
          _t: JSON.stringify(Date.now()).substring(0, 10),
          column: 'createTime',
          order: 'desc',
          field: 'id,,,code,name,isFunctional_dictText,isEnabled_dictText,action',
          pageNo: 1,
          pageSize: 10,
        }
        const res = await getListe(p)
        this.data1 = res.result.records
      },
  
      //删除
      // async del(id1) {
      //   const p = {
      //     id: id1
      //   }
      //   await delUser(p)
      //   this.getuserform()
      // },
      //搜索
      // async search() {
      //   const p = {
      //     _t: JSON.stringify(Date.now()).substring(0, 10),
      //     username: `*${this.text}*`,
      //     sex: this.sex,
      //     realname:this.realname,
      //     status:this.status,
      //     phone:this.phone,
      //     column: 'createTime',
      //     order: 'desc',
      //     field: 'id,,username,realname,avatar,sex_dictText,birthday,phone,orgCode,departIds_dictText,status_dictText,action',
      //     pageNo: 1,
      //     pageSize: 10,
      //   }
      //   const res = await getuser(p)
      //   if (res.status === 500) {
      //     localStorage.removeItem("token")
      //     window.open("/login")
      //     console.log("错误")
      //   }
      //   console.log(res)
      //   this.data1 = res.result.records
      // },
      //分页
      handleTableChange2(pagination) {
        this.ipagination1.current = pagination.current
        this.ipagination1.pageSize = pagination.pageSize
      },
  
  
  
  
  
  
      showDrawer() {
        this.visible = true;
      },
      onClose() {
        this.visible = false;
      },
      handleButtonClick(e) {
        console.log(e)
      },
      handleMenuClick(e) {
        console.log(e)
      },
      start() {
        this.loading = true;
        // ajax request after empty completing
        setTimeout(() => {
          this.loading = false;
          this.selectedRowKeys = [];
        }, 1000);
      },
      onDelete(key) {
        const dataSource = [...this.dataSource];
        this.dataSource = dataSource.filter(item => item.key !== key);
      },
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
      },
      //重置键
      reload1() {
        this.realname = "",
          this.phone = "",
          this.status = undefined,
          this.sex = undefined,
          this.text = "",
          this.getuserform()
      }
    },
  };
  </script>
  <style>
  .input {
    width: 423.99px;
  }
  
  .butbox {
    width: 100%;
    padding: 10px;
    border: 10px;
  }
  
  .newform {
    padding: 20px 40px;
  }
  
  .a-button {
    margin-left: 10px;
  }
  
  .search {
    width: 243.45px;
    margin-bottom: 10px;
  
  }
  
  .dropdown {
    width: 279.5px;
  }
  
  .background {
    background-color: #fff;
    margin: 4px 4px 0px;
  }
  </style>